<template>
  <div>
    <pro-layout
      v-if="settings.layout === 'topmenu'"
      :menus="menusRes"
      :collapsed="collapsed"
      :mediaQuery="query"
      :isMobile="isMobile"
      :handleMediaQuery="handleMediaQuery"
      :handleCollapse="handleCollapse"
      :theme="navTheme"
      v-bind="settings"
    >
      <!-- <multi-tab v-if="settings.multiTab"></multi-tab>
      <transition name="page-transition"></transition> -->
      <!-- 1.0.0+ 版本 pro-layout 提供 API，我们推荐使用这种方式进行 LOGO 和 title 自定义 -->
      <template v-slot:menuHeaderRender>
        <div class="top-logo">
          <!-- <logo-svg /> -->
          <img src="~@/assets/reception/logo.png" />
          <!-- <h1>{{ title }}</h1> -->
        </div>
      </template>
      <!-- 1.0.0+ 版本 pro-layout 提供 API, 增加 Header 左侧内容区自定义 -->
      <!-- <setting-drawer v-if="isDev" :settings="settings" @change="handleSettingChange"></setting-drawer>-->
      <setting-drawer v-if="isDev"></setting-drawer>
      <!-- <template v-slot:rightContentRender>
        <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
      </template> -->
      <template v-slot:rightContentRender>
        <div class="login" v-if="store.getters.ZHLB != 0">
          <span>登录</span>/<span>注册</span>
        </div>
        <div v-else>
          {{ store.getters.ZHLB }}
        </div>
      </template>
      <!-- custom footer / 自定义Footer -->
      <template v-slot:footerRender>
        <reception-bottom></reception-bottom>
        <!-- <global-footer /> -->
      </template>
      <router-view />
    </pro-layout>
    <pro-layout
      v-else
      :menus="menusBac"
      :collapsed="collapsed"
      :mediaQuery="query"
      :isMobile="isMobile"
      :handleMediaQuery="handleMediaQuery"
      :handleCollapse="handleCollapse"
      :theme="navTheme"
      v-bind="settings"
    >
      <!-- <multi-tab v-if="settings.multiTab"></multi-tab>
      <transition name="page-transition"></transition> -->
      <!-- 1.0.0+ 版本 pro-layout 提供 API，我们推荐使用这种方式进行 LOGO 和 title 自定义 -->
      <template v-slot:menuHeaderRender>
        <div>
          <!-- <logo-svg /> -->
          <img src="~@/assets/logo.png" width="32px" height="32x" />
          <h1>{{ title }}</h1>
        </div>
      </template>
      <!-- 1.0.0+ 版本 pro-layout 提供 API, 增加 Header 左侧内容区自定义 -->
      <!-- <setting-drawer v-if="isDev" :settings="settings" @change="handleSettingChange"></setting-drawer>-->
      <setting-drawer v-if="isDev"></setting-drawer>
      <template v-slot:rightContentRender>
        <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
      </template>
      <!-- custom footer / 自定义Footer -->
      <template v-slot:footerRender>
        <!-- <global-footer /> -->
      </template>
      <router-view />
    </pro-layout>
  </div>

</template>

<script>
import SettingDrawer from '@/components/SettingDrawer'
import receptionBottom from '@/components/reception/bottom.vue'
// import { i18nRender } from '@/locales'
import { mapGetters, mapState } from 'vuex'
import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'
import store from '@/store/index'
import defaultSettings from '@/config/defaultSettings'
import GlobalFooter from '@/components/GlobalFooter'
import RightContent from '@/components/GlobalHeader/RightContent'
import MultiTab from '@/components/MultiTab'
import LogoSvg from '../assets/logo.svg?inline'
export default {
  name: 'BasicLayout',
  components: {
    SettingDrawer,
    RightContent,
    GlobalFooter,
    LogoSvg,
    receptionBottom,
    MultiTab
  },
  data () {
    return {
      isDev: process.env.NODE_ENV === 'development' || process.env.VUE_APP_PREVIEW === 'true',
      // base
      menusRes: [],
      menusBac: [],
      // 侧栏收起状态
      collapsed: false,
      title: defaultSettings.title,
      settings: {
        multiTab: defaultSettings.multiTab,
        // 布局类型
        layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
        // CONTENT_WIDTH_TYPE
        contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
        // 主题 'dark' | 'light'
        theme: defaultSettings.navTheme,
        // 主色调
        primaryColor: defaultSettings.primaryColor,
        fixedHeader: defaultSettings.fixedHeader,
        fixSiderbar: defaultSettings.fixSiderbar,
        colorWeak: defaultSettings.colorWeak,

        hideHintAlert: false,
        hideCopyButton: false
      },
      // 媒体查询
      query: {},

      // 是否手机模式
      isMobile: false
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.addRouters
    }),
    ...mapGetters({
      navTheme: 'theme'
    })
  },
  created () {
    const routes = this.mainMenu.find((item) => item.path === '/')
    for (const item of routes.children) {
      if (item.path.substring(0, 10) === '/reception') {
        this.menusRes.push(item)
      }else{
        this.menusBac.push(item)
      }
    }
    if (this.$route.path.substring(0, 10) === '/reception') {
          this.settings.layout = 'topmenu'
        } else {
          this.settings.layout = 'sidemenu'
        }
    // if (route.to.path.substring(0, 10) === '/reception') {
      // this.menusRes = (routes && routes.children) || []
    // } else {
      // this.menusBac = (routes && routes.children) || []
      console.log('1111111111111', this.$route.path)
    // }
    // 处理侧栏收起状态
    this.$watch('collapsed', () => {
      this.$store.commit(SIDEBAR_TYPE, this.collapsed)
    })
    this.$watch('isMobile', () => {
      this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
    })
  },
  mounted () {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
  },
  methods: {
    // i18nRender,
    handleMediaQuery (val) {
      this.query = val
      if (this.isMobile && !val['screen-xs']) {
        this.isMobile = false
        return
      }
      if (!this.isMobile && val['screen-xs']) {
        this.isMobile = true
        this.collapsed = false
        this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
        // this.settings.fixSiderbar = false
      }
    },
    handleCollapse (val) {
      this.collapsed = val
    }
  },
  watch: {
    // watch第一次绑定值的时候不会执行监听，修改数据才会触发函数
    $route: {
      handler (to, from) {
        console.log('watch', to.path)
        if (to.path.substring(0, 10) === '/reception') {
          this.settings.layout = 'topmenu'
        } else {
          this.settings.layout = 'sidemenu'
        }
      }
      // immediate:true,//第一次就执行
    } // pink
  }
}
</script>

<style lang="less">
@import './BasicLayout.less';
.topmenu{
  .top-logo{
    margin-left:40px ;
    img{
      width: 100px;
      height: 40px;
    }
  }
  .ant-layout-content{
    margin: 0 !important;
  }
  .ant-layout-footer{
    padding: 0;
  }
  .ant-layout-header{
    background: #fff;
  }
  .ant-menu-dark, .ant-menu-dark .ant-menu-sub{
    // color:#5578ef;
    color: #000;
    background:#fff
  }
  .ant-menu-dark .ant-menu-item, .ant-menu-dark .ant-menu-item-group-title, .ant-menu-dark .ant-menu-item > a{
    color: #000;
    font-style:italic;
  }
  .ant-menu-dark .ant-menu-item, .ant-menu-dark .ant-menu-item-group-title, .ant-menu-dark .ant-menu-item > a:hover{
    color: #5578ef;
  }
  .ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected{
    background: #fff;
    span{
      color: #5578ef;
    }
    span::before{
      content: '';
      width: 50px;
      height: 2px;
      background: #a3b6f6;
      position: absolute;
      bottom: 15px;
      left: 50%;
      margin-left: -25px;
    }
  }
}

</style>

<style lang="less" scoped >
  .login{
    width: 100%;
    text-align: right;
    padding-right: 40px;
    color: #000;
    font-size: 16px;
  }
</style>
